<template>
	<view class="pics">
		<scroll-view class="left" scroll-y="" >
			<!-- <view class="active">温侯奉先</view>  :class="active"-->
			<view v-for="(item,index) in picsList" 
			:key="item.id" 
			@click="clickLeft(index,item.id)"
			:class="active == index? 'active': '' "
			>{{item.title}}</view>
		</scroll-view>
		
		<scroll-view class="right" scroll-y="" >
			<view class="" v-for="item in rightPics" :key="item.id">
				<image :src="item.img_url" mode="" @click="previewImg"></image>
				<text>{{item.title}}</text>
			</view>
			<view class="" v-if="rightPics==0">
				----暂无数据----
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// scroll左侧数据
				picsList:[],
				// 动态类
				active: 0,
				rightPics:[],
			}
		},
		onLoad() {
			this.getPicsList()
		},
		methods: {
			//  /api/getimgcategory 请求左侧数据
			// 获取一级分类  同时调用一下二级分类函数
			async getPicsList() {
				const res = await this.$http({
					// 地址里面不能有空格, 否则地址解析有问题
					url: '/api/getimgcategory'
				})
				this.picsList = res.data.message
				// console.log(res.data.message)
				// 当页面一加载就会获取左侧数据, 同时调用默认高亮的 请求数据
				this.clickLeft(0,this.picsList[0].id)
			},
			// 点击左侧拿到id 使其对应的 高亮 并且拿到右侧数据 
			async clickLeft (i,id) {
				// console.log(i,id)
				this.active = i
				const res = await this.$http({
					url: `/api/getimages/${id}`
				})
				this.rightPics = res.data.message
			},
			//  右侧图片预览
			previewImg(item) {
				// const  imgArr = this.rightPics.map( item => {
				// 	return item.img_url
				// })
				var imgArr = []
				this.rightPics.forEach( item => {
					imgArr.push(item.img_url)
				})
				// console.log(imgArr)
				// 预览图片 把点击的图片传过来, current 为当前显示图片的链接 urls图片数组
				uni.previewImage({
					current:item,
					urls:imgArr
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.pics {
		height: 100%;
		display: flex;
		.left {
			height: 100%;
			width: 200rpx;
			border-right: 1px solid #eee;
			view {
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-top: 1px solid #eee;
				color: #333;
				font-size: 30rpx;
			}
			.active {
				background-color: $shop-color;
				color: #fff;
			}
		}
		.right {
			width: 530rpx;
			height: 100%;
			// background-color: pink;
			margin-left: 10rpx;
			view {
				margin: 15rpx 10rpx;
			}
			image {
				width: 100%;
				border-radius: 10px;
			}
		}
	}
	
	
</style>
